<template>
  <div class="Address">
    <div class="dizhi">
      <p>新增收货地址</p>
    </div>
    <div class="form_content">
      <el-form
        label-width="80px"
        :model="formLabelAlign"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="收货人" prop="consigneeName">
          <el-input
            v-model="formLabelAlign.consigneeName"
            placeholder="请填写收货人信息"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="formLabelAlign.mobile"
            placeholder="请填写收货人手机号"
          ></el-input>
        </el-form-item>

        <el-form-item label="收货地址">
          <el-select
            v-model="formLabelAlign.province"
            placeholder="请选择省份"
            style="width: 33%"
            @change="provinceForm"
          >
            <el-option
              v-for="item in provinceList"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="formLabelAlign.city"
            placeholder="请选择市区"
            style="width: 34%"
            @change="cityForm"
          >
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="formLabelAlign.area"
            placeholder="请选择区县"
            style="width: 33%"
            @change="areaForm"
          >
            <el-option
              v-for="item in areaList"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="desc">
          <el-input
            type="textarea"
            v-model="formLabelAlign.desc"
            :rows="4"
            placeholder="请输入详细地址信息"
          ></el-input>
        </el-form-item>
        <el-form-item label="设为默认">
          <el-switch
            v-model="valueDefault"
            active-color="#13ce66"
            inactive-color="#f1f3f4"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button
            type="primary"
            round
            @click="addFormData('ruleForm', formLabelAlign)"
            style="width: 25%"
          >
            确 定 添加
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 地址管理 -->
    <div class="address_man">
      <h3>地址管理</h3>
      <div
        class="detailedAddress fl"
        v-for="(item, index) in addressList"
        :key="item.id"
      >
        <div class="left_t">
          <div class="name_mobile fl">
            <h3>{{ item.name }}</h3>
            <span>{{ item.mobile }}</span>
          </div>
          <p style="line-height: 55px">
            收货地址：{{ item.province.name }} {{ item.city.name }}
            {{ item.area.name }}
          </p>
        </div>
        <div class="right-t">
          <div
            class="item_status"
            :class="
              active_it == index + 1 || item.is_default == 1 ? 'active' : ''
            "
            @click="setDefaultAddress(item, index)"
          >
            <p></p>
            <p>设为默认地址</p>
          </div>
          <el-link
            icon="el-icon-edit-outline"
            :underline="false"
            @click="editDialog(item.id)"
          >
            编辑
          </el-link>
          <el-link
            :underline="false"
            icon="el-icon-delete"
            @click="deleteSel(item.id)"
          >
            删除
          </el-link>
        </div>
      </div>
    </div>

    <!-- 编辑地址 -->
    <el-dialog
      title="修改收货地址"
      :visible.sync="dialogVisible"
      width="35%"
      center
    >
      <div class="profile_t">
        <el-form
          label-width="72px"
          :model="editForm"
          :rules="rules"
          ref="ruleForm"
        >
          <el-form-item label="收货人" prop="consigneeName">
            <el-input
              v-model="editForm.consigneeName"
              placeholder="请填写收货人信息"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input
              v-model="editForm.mobile"
              placeholder="请填写收货人手机号"
            ></el-input>
          </el-form-item>

          <el-form-item label="收货地址">
            <el-select
              v-model="editForm.province"
              placeholder="请选择省份"
              style="width: 33%"
              @change="provinceForm"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="editForm.city"
              placeholder="请选择市区"
              style="width: 34%"
              @change="cityForm"
            >
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="editForm.area"
              placeholder="请选择区县"
              style="width: 33%"
              @change="areaForm"
            >
              <el-option
                v-for="item in areaList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址" prop="desc">
            <el-input
              type="textarea"
              v-model="editForm.desc"
              :rows="4"
              placeholder="请输入详细地址信息"
            ></el-input>
          </el-form-item>
          <el-form-item label="设为默认">
            <el-switch
              v-model="valueDefault"
              active-color="#13ce66"
              inactive-color="#f1f3f4"
              active-value="1"
              inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="affirmEdit(editForm)">
          确 定修改
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAddressAll,
  addgetAddress,
  addgetArea,
  EditInfo,
  getEditAffirm,
  delAddress
} from '@/api/address'

export default {
  name: 'receivingAddress',
  data() {
    return {
      formLabelAlign: {
        mobile: '',
        desc: '',
        province: '', // 省
        city: '', // 市
        area: '', // 区
        consigneeName: '' // 收货人
      },
      editForm: {
        mobile: '',
        desc: '',
        consigneeName: '',
        province: '', // 省
        city: '', // 市
        area: '', // 区
        consigneeName: '' // 收货人
      },
      editId: '',
      active_it: 1,
      radioAddress: 1,
      dialogVisible: false,
      cityList: [],
      areaList: [],
      provinceList: [],
      addressList: [],
      valId: 0,
      valueDefault: '1',
      checked_b: true,
      value: [],
      rules: {
        consigneeName: [
          { required: true, message: '请输入收货人信息', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        desc: [
          { required: true, message: '请填写详细地址信息', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getAddressList()
    this.getareaAdd(this.valId, 0)
  },
  methods: {
    provinceForm(value) {
      console.log('', value)
      this.formLabelAlign.province = value
      this.getareaAdd(value, 1)
    },
    cityForm(value) {
      console.log(value)
      this.formLabelAlign.city = value
      this.getareaAdd(value, 2)
    },
    areaForm(value) {
      this.formLabelAlign.area = value
      console.log(value)
    },
    getAddressList() {
      getAddressAll().then(({ data: data }) => {
        this.addressList = data.data
      })
    },
    editDialog(id) {
      this.dialogVisible = true
      console.log(id)
      this.editId = id
      this.getEdit(id)
    },
    affirmEdit(itemForm) {
      this.dialogVisible = false
      let editForm = {
        name: itemForm.consigneeName,
        mobile: itemForm.mobile,
        address: itemForm.desc,
        province_id: itemForm.province,
        area_id: itemForm.area,
        city_id: itemForm.city,
        is_default: this.valueDefault,
        id: this.editId
      }
      console.log(itemForm, editForm)
      getEditAffirm(editForm).then(({ data: data }) => {
        if (data.code == 1) {
          this.getAddressList()
          this.$message.success({
            type: 'success',
            iconClass: ' ', // 这个会覆盖图标类名，为了实现去掉图标的操作
            customClass: 'el-message--success',
            message: data.msg
          })
        }
      })
    },
    getEdit(Id) {
      EditInfo({ id: Id }).then(({ data: data_edit }) => {
        console.log(data_edit.data)
        this.editForm.mobile = data_edit.data.mobile
        this.editForm.desc = data_edit.data.address
        this.editForm.consigneeName = data_edit.data.name
        this.editForm.province = data_edit.data.province.name
        this.editForm.city = data_edit.data.city.name
        this.editForm.area = data_edit.data.area.name
      })
    },
    getareaAdd(valId, type) {
      addgetArea({ pid: valId }).then(({ data: data }) => {
        if (type == 0) {
          this.provinceList = data.data
        } else if (type == 1) {
          this.cityList = data.data
        } else if (type == 2) {
          this.areaList = data.data
        }
      })
    },
    addFormData(formName, valueAddress) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let form_params = {
            name: valueAddress.consigneeName,
            mobile: valueAddress.mobile,
            address: valueAddress.desc,
            province_id: valueAddress.province,
            area_id: valueAddress.area,
            city_id: valueAddress.city,
            is_default: this.valueDefault
          }
          console.log(valueAddress, form_params)
          let { data: data } = await addgetAddress(form_params)
          this.getAddressList()
          this.$message.success({
            message: '添加成功',
            type: 'success',
            iconClass: ' ', // 这个会覆盖图标类名，为了实现去掉图标的操作
            customClass: 'el-message--success' // 这个是由于上面设置了iconClass会覆盖掉type，所以需要再设置
          })
          this.formLabelAlign = {}
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    setDefaultAddress(it, i) {
      console.log(it, i)
      this.active_it = i + 1
    },
    deleteSel(delId) {
      this.$confirm('确定要删除该地址吗？', '提示！', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async () => {
          const { data: data } = await delAddress({ id: delId })
          if (data.code == 1) {
            this.getAddressList()
            this.$message({
              type: 'success',
              iconClass: ' ', // 这个会覆盖图标类名，为了实现去掉图标的操作
              customClass: 'el-message--success',
              message: '删除成功'
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.fl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Address {
  padding: 20px;

  .dizhi {
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
  }

  .form_content {
    margin-top: 25px;
    padding-left: 30px;
    width: 50%;
  }

  .address_man {
    margin-top: 25px;
    padding-left: 30px;

    h3 {
      font-size: 15px;
      color: #333;
    }
    .detailedAddress {
      height: 94px;
      border: 1px solid #e5e5e5;
      padding: 0 20px;
      margin-bottom: 10px;
      margin-top: 10px;
      border-radius: 3px;

      .left_t {
        height: 100%;
        width: 60%;
        line-height: 25px;
        color: #666;
        .name_mobile {
          margin-top: 10px;
          h3 {
            flex: 1;
          }
          span {
            flex: 2;
          }
        }
      }

      .right-t {
        height: 100%;
        line-height: 94px;

        .active {
          p:first-child {
            border: 1px solid #2280f0 !important;
            &::after {
              content: ' ';
              display: block;
              background: #2280f0;
              width: 10px;
              height: 10px;
              text-align: center;
              margin: 3px auto;
              border-radius: 50%;
            }
          }
        }

        .item_status {
          display: inline-block;
          position: relative;
          cursor: pointer;
          font-weight: 500;
          color: #606266;
          p:first-child {
            content: ' ';
            display: block;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            border: 1px solid #ccc;
            position: absolute;
            top: 39px;
            left: -25px;
          }
        }

        ::v-deep {
          // 修改选择框颜色
          .el-checkbox__input.is-checked .el-checkbox__inner,
          .el-checkbox__input.is-indeterminate .el-checkbox__inner {
            border-color: #57a75a !important;
            background-color: #57a75a !important;
          }

          .el-checkbox__input.is-focus .el-checkbox__inner {
            border-color: #57a75a !important;
          }

          // 修改选择label字体颜色
          .el-checkbox__input.is-checked + .el-checkbox__label {
            color: #111 !important;
          }
        }

        .el-link {
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
